<template>
	<view class="list-item" @click="toDetai(itemData.id)">
		<view class="image-wrap">
			<image :src="itemData.image.src" mode=""></image>
		</view>
		<view class="main-wrap">
			<view class="good-name">
				{{ itemData.name }}
			</view>
			<view class="category">
				{{ itemData.categoryName }}
			</view>
			<view class="good-price-num">
				<view class="good-price">
					￥{{ itemData.price }}
				</view>
				<view class="read-num">
					{{ itemData.readNum }}人看过
				</view>
			</view>
			<view class="about">
				<view class="user">
					<image :src="itemData.sellerAvatar" mode=""></image>
				</view>
				<view class="username">
					{{ itemData.sellerName }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
		   itemData:{
			   default:{
				   id:1,
				   image:"",
				   name:"",
				   category:"",
				   price:99,
				   readNum:0,
				   userImg:"",
				   username:""
			   }
		   }
		},
		methods: {
			/**
			 * 跳转详情页
			 * @param {Object} id
			 */
			toDetai(id){
				uni.navigateTo({
					url:`/pages/detail/detail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="less" >
  .list-item {
	margin: 10rpx 0;
  	width: 100%;
  	height: 240rpx;
  	background-color: #ffffff;
  	display: flex;
    box-shadow: -2rpx -2rpx 2rpx rgb(209, 209, 209) inset;
    border-radius: 20rpx;
  
  	.image-wrap {
  		flex: 4;
  
  		image {
  			width: 100%;
  			height: 100%;
  		}
  	}
  
  	.main-wrap {
  		flex: 6;
  		padding: 10rpx 15rpx;
		padding-bottom: 20rpx;
  		// width: calc( 100% - 30rpx );
  
  
  
  
  		.good-name {
  			height: 90rpx;
  			width: 100%;
  			font-size: 34rpx;
  			 display: -webkit-box;
  			// 不换行
  			overflow: hidden;
  			-webkit-box-orient: vertical;
  			// 俩点S
  			-webkit-line-clamp: 2;
  		}
  
  		.category {
  			height: 30rpx;
  			font-size: 28rpx;
  			padding: 15rpx 10rpx;
  			padding-bottom: 5rpx;
  			// color: ;
  		}
  
  
  		.good-price-num {
  			display: flex;
  			flex-direction: row;
  			align-items: center;
  				
  			.good-price {
  				padding-right: 30rpx;
  				font-size: 36rpx;
  				color: #ff5500;
  			}
  
  			.read-num {
  				font-size: 14rpx;
  				display: flex;
  				align-items: center;
  			}
  		}
  
  
  
  
  		.about {
  			display: flex;
  			flex-direction: row;
  
  			.user {
  				width: 40rpx;
  				height: 40rpx;
				border-radius: 20rpx;
				overflow: hidden;
			
  				image {
  					width: 100%;
  					height: 100%;
  				}
  			}
  
  			.username {
  				width: 160rpx;
  				padding: 0 15rpx;
  				font-size: 28rpx;
  				display: flex;
  				align-items: center;
  				overflow: hidden;
  				text-overflow: ellipsis;
  				white-space: nowrap;
  			}
  
  		}
  	}
  }
</style>
